<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<html>
<head>
  <title>酒店管理系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <!-- <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css"> -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./static/css/style.css">
  <style>
    body {
      margin: 0;
      background-color: white;
    }

    /* 所有 */
    
    #app {
      width: 100%;
    }
    .login {
      transition: 0.3s;
      transform: translateY(5px);
      -ms-transform: translateY(5px);
      -webkit-transform: translateY(5px);
      position: absolute;
      right: 5%;
      width: 400px;
      top: 20%;
      background-color: aliceblue;
      border-radius: 10px;
      padding: 10px 30px 0 0;
      height: auto;
    }
    .login:hover {
      -moz-box-shadow: 0 2px 40px -24px rgba(0, 36, 100, 1);
      box-shadow: 0 2px 40px -24px rgba(0, 36, 100, 1);
      transition: 0.3s;
      transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      -webkit-transform: translateY(-5px);
    }
    .bg {
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="app">
    <img class="bg" src="./static/imgs/bg.png" alt="">
    <div>
      <div class="login">
        <h1 style="color: rgba(0,0,0,0.7); text-align: center;">Hotel Managerment</h1>
        <el-carousel  height="380px" ref="carousel" :autoplay="false" arrow="never" >
          <el-carousel-item  >
            <el-form label-width="80px" :model="loginform">
              <el-form-item label="名称">
                <el-input v-model="loginform.name"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="loginform.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">登陆</el-button>
                <el-button @click="resetpass">重置密码</el-button>
                <el-button type="success" circle type="primary"  icon="el-icon-arrow-right"  @click="goregist"></el-button>
              </el-form-item>
              <el-form-item>
                Copyright: All Right Reserved @ YaoJun Zhou
              </el-form-item>
            </el-form>
          </el-carousel-item>
          <el-carousel-item  >
            <el-form label-width="80px" :model="registform">
              <el-form-item label="名称">
                <el-input placeholder="请输入名称" v-model="registform.name"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input placeholder="请输入电话" minlength="11" maxlength="11" v-model="registform.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input placeholder="请输入邮箱" v-model="registform.email"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input minlength="3" maxlength="10" type="password" v-model="registform.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button circle type="primary"  icon="el-icon-arrow-left"  @click="gologin"> </el-button>
                 <el-button type="success" @click="regist">注册</el-button>
              </el-form-item>
              <el-form-item>
                Copyright: All Right Reserved @ YaoJun Zhou
              </el-form-item>
            </el-form>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        loginform: {
          pass: "",
          name: "",
         },
         registform: {
          pass: "",
          name: "",
          info: "",
          email: "",

         },
      },
      methods: {
        submitForm() {
          console.log(this.loginform);
          axios.post("/login", this.loginform).then(res => {
            console.log(res);
            let { result, userbase } = res.data;
            if (result == "1001") {
              localStorage.setItem("userbase",userbase)
              console.log("1001");
              userbase = JSON.parse(userbase);
              if (userbase.type == "1") {
                console.log("go index");
                window.location.href = "/index.jsp"
              }
              if (userbase.type == "2") {
                console.log("go index2");
                window.location.href = "/index2.jsp"
              }
              if (userbase.type == "3") {
                console.log("go index2");
                window.location.href = "/index3.jsp"
              }
            } else {
              this.$notify.error({
                title: '登陆信息',
                message: '登陆失败，用户不存在或密码错误'
              })
            }
          })
        },
        resetpass() {

        },
        gologin() {
          this.$refs.carousel.setActiveItem(0)

        },
        goregist(){
          this.$refs.carousel.setActiveItem(1)
        },
        regist() {

          axios.post("/regUser",this.registform).then(res=>{
            if(res.data.result == "ok")
            {
              this.$notify.success({
                title: '注册信息',
                message: '注册成功，请登陆'
              })
            }else{
              this.$notify.error({
                title: '注册信息',
                message: res.data.result
              })
            }
          })
        }
      }
    });
  </script>



</body>

</html>